<template>
	<div class="mall-container">
		<ShopHeader :isInput="dataArr.isInput" 
			:iconArr="dataArr.iconArr" 
			:placeholder="dataArr.placeholder"
			:aimUrl="dataArr.aimUrl"
			:rightUrl="dataArr.rightUrl"
		/>
		<div class="mall-swiper">
			<PublicSwiper :swiperData="swiperArr" />
		</div>
		<p class="category-title">所有分类</p>
		<div class="new-category-wrap">
			<div class="category-item" v-for="(item,index) in categoryArr" :key="index">
				<router-link 
					:to="{name:'category',params:{title:item.title}}"
				> 
					<img :src="item.imgUrl" alt=""> 
				</router-link>
				<p>{{item.title}}</p>
			</div>
		</div>
		<div class="new-img-wrap" v-for="(item,index) in themeArr" :key="index">
			<p>{{item.title}}</p>
			<div class="img-wrap-item">
				<img :src="item.imgUrl" alt="">
			</div>
		</div>
		<!-- {{ getCookie }} -->
		<div class="zhanwei"></div>
	</div>
</template>
<script>
	import ShopHeader from "../../components/shopheader"
	import PublicSwiper from "../../components/publicswiper"
	export default{
		name:'secondmall',
		data(){
			return{
				themeArr:[
					{
						title:"品质生活",
						imgUrl:require("../../assets/images/shopping/img_pinzhishenghuo@2x.png")
					},
					{
						title:"品牌特卖",
						imgUrl:require("../../assets/images/shopping/img_pinpaitemai@2x.png")
					}
				],
				categoryArr:[
					{
						id:1,
						title:"卧室",
						imgUrl:require("../../assets/images/shopping/img_woshi@2x.png")
					},
					{
						id:2,
						title:"客厅",
						imgUrl:require("../../assets/images/shopping/img_keting@2x.png")
					},
					{
						id:3,
						title:"浴室",
						imgUrl:require("../../assets/images/shopping/img_yushi@2x.png")
					},
					{
						id:4,
						title:"厨房",
						imgUrl:require("../../assets/images/shopping/img_chufang@2x.png")
					},
					{
						id:5,
						title:"餐厅",
						imgUrl:require("../../assets/images/shopping/img_canting@2x.png")
					},
					{
						id:6,
						title:"儿童",
						imgUrl:require("../../assets/images/shopping/img_ertong@2x.png")
					}
				],
				swiperArr:[
					require("../../assets/images/shopping/img_banner@2x.png")
				],
				dataArr:{
					isInput:true,
					iconArr:[
						{
							iconLeft:"icon-zuojiantou",
							iconRight:"icon-gouwuche"
						}
					],
					placeholder:"搜索",
					aimUrl:"/layout/shopping",
					rightUrl:'/shopping/shopcar'
				}
			}
		},
		components:{
			ShopHeader,
			PublicSwiper
		},
		computed:{
			// getCookie(){
			// 	return console.log(JSON.parse(this.$cookie.get("order")))
			// }
		}
	}
</script>
<style scoped lang="less">
	.mall-container{
		width: 100%;
		// background-color:#efefef;
		overflow: hidden;
		.mall-swiper{
			width: 100%;
			// height: 277 / 2 / 50rem;
			margin-top: 90 / 2 / 50rem;
		}
		.category-title{
			color: rgba(0,0,0,.8);
			font-size: 13 / 50rem;
			width: 100%;
			text-align: center;
			margin: 20 / 2 / 50rem 0;
			font-weight: 700;
		}
		.new-category-wrap{
			width: 95%;
			height: 338 / 2 / 50rem;
			margin: 0 auto;
			box-shadow: 0 0  14 / 2 / 50rem rgba(0,0,0,.1);
			border-radius: 10 / 2 / 50rem;
			overflow: hidden;
			.category-item{
				float: left;
				width: 33%;
				height: 169 / 2 / 50rem;
				text-align: center;
				color: rgba(0,0,0,.8);
				font-size: 12 / 50rem;
				overflow: hidden;
				img{
					width: 107 / 2 / 50rem;
					height: 107 / 2 / 50rem;
					margin-bottom: 15 / 2 / 50rem;
					margin-top: 10 / 2 / 50rem;
				}
			}
		}
		.new-img-wrap{
			width: 95%;
			height: 260 / 2 / 50rem;
			margin: 0 auto;
			margin-top: 20 / 2 / 50rem;
			p{
				text-align: right;
				font-size: 13 / 50rem;
				color: rgba(0,0,0,.8);
				font-weight: 700;
				margin-bottom: 20 / 2 / 50rem;
			}
			.img-wrap-item{
				width: 100%;
				height: 217 / 2 / 50rem;
				// background-color: #185;
				border-radius: 10 / 2 / 50rem;
				img{
					width: 100%;
					height: 100%;
				}
			}
		}
		.zhanwei{
			width: 100%;
			height: 122 / 2 / 50rem;
		}
	}
</style>